<template>
  <div class="left-toolbar-wrap">
    <el-tooltip
      effect="tduck"
      :content="$t('formgen.fastToolbar.redo')"
      placement="bottom"
    >
      <el-icon
        size="22"
        :class="[undoStacks.length ? '' : 'disable']"
        @click="operationUndo()"
        class="cursor-pointer"
      >
        <TablerArrowBackUp />
      </el-icon>
    </el-tooltip>
    <el-tooltip
      effect="tduck"
      :content="$t('formgen.fastToolbar.redo')"
      placement="bottom"
    >
      <el-icon
        size="22"
        @click="operationRedo()"
        class="cursor-pointer"
        :class="[redoStacks.length ? '' : 'disable']"
      >
        <TablerArrowForwardUp />
      </el-icon>
    </el-tooltip>
    <el-tooltip
      effect="tduck"
      :content="$t('formgen.fastToolbar.clean')"
      placement="bottom"
    >
      <el-icon
        size="22"
        class="cursor-pointer"
        @click="cleanDrawingItem()"
      >
        <TablerTrashX />
      </el-icon>
    </el-tooltip>
    <el-tooltip
      effect="tduck"
      :content="$t('formgen.fastToolbar.key')"
      placement="bottom"
    >
      <el-icon
        size="22"
        class="cursor-pointer"
        @click="dialogVisible = true"
      >
        <TablerKeyboard />
      </el-icon>
    </el-tooltip>
    <el-dialog
      v-model="dialogVisible"
      :title="$t('formgen.fastToolbar.key')"
      width="600"
    >
      <table>
        <tbody>
          <tr>
            <td>{{ $t("formgen.fastToolbar.copy") }}</td>
            <td>Ctrl + C</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.paste") }}</td>
            <td>Ctrl + V</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.cut") }}</td>
            <td>Ctrl + X</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.undo") }}</td>
            <td>Ctrl + Z</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.redo") }}</td>
            <td>Ctrl + Shift + Z</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.clean") }}</td>
            <td>Ctrl + Shift + C</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.moveUpSelect") }}</td>
            <td>↑</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.moveDownSelect") }}</td>
            <td>↓</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.moveUp") }}</td>
            <td>Ctrl + ↑</td>
          </tr>
          <tr>
            <td>{{ $t("formgen.fastToolbar.moveDown") }}</td>
            <td>Ctrl + ↓</td>
          </tr>
        </tbody>
      </table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ $t("common.cancel") }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import TablerArrowBackUp from "~icons/tabler/arrow-back-up";
import TablerArrowForwardUp from "~icons/tabler/arrow-forward-up";
import TablerTrashX from "~icons/tabler/trash-x";
import TablerKeyboard from "~icons/tabler/keyboard";
import { operationHistory } from "../hooks/useOperationHistory";
import { formDesign } from "@/views/formgen/components/FormDesign/hooks/useFormDesign";
import { useShortcutKey } from "@/views/formgen/components/FormDesign/hooks/useShortcutKey";
import { ref } from "vue";

const { undoStacks, redoStacks } = operationHistory;

const { cleanDrawingItem } = formDesign;

const { operationRedo, operationUndo } = useShortcutKey();

const dialogVisible = ref(false);
</script>
<style scoped lang="scss">
.left-toolbar-wrap {
  width: 166px;
  display: flex;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  gap: 12px;
  position: absolute;
  top: 24px;
  padding: 6px 20px;
  z-index: 888;
}

@media screen and (max-width: 1500px) {
  .left-toolbar-wrap {
    // width: 35px;
    display: flex;
    border-radius: 6px;
    // gap: 12px;
    position: absolute;
    top: 24px;
    // padding: 6px 20px;
    z-index: 999;
    // flex-direction: column;
    // align-items: center;
  }
}

.el-icon {
  color: #484848;
}

.disable {
  cursor: not-allowed;
  color: var(--el-border-color) !important;
}

.el-icon:not(.disable):hover {
  cursor: pointer;
  color: var(--el-color-primary);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  background-color: var(--el-bg-color-overlay);
}

td,
th {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
}

/* 表尾样式 */
tfoot td {
  background-color: var(--el-bg-color-overlay);
  font-weight: bold;
  text-align: right;
  padding: 10px;
  border-top: 2px solid #ddd;
}

tr.clickable-row:hover {
  background-color: #ccc;
}
</style>
